<template>
  <div class="search-frame">
    <div class="left">
      <input
        type="text"
        placeholder="请输入商家或美食名称"
        v-model="searchContent"
      />
      <span v-show="isShow" @click="handleEmptySearchContent">x</span>
    </div>
    <input type="submit" @click="handleSearchSubmit" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchContent: "",
      isShow: false,
    };
  },
  watch: {
    searchContent(value) {
      this.isShow = value.trim() ? true : false;
      this.$bus.$emit("searchContent", value);
    },
  },
  mounted() {
    this.$bus.$on("handleClickSearchHistory", (item) => {
      this.searchContent = item;
    });
  },
  activated() {
    this.searchContent = "";
  },
  methods: {
    handleEmptySearchContent() {
      this.searchContent = "";
    },
    handleSearchSubmit() {
      if (this.isShow) {
        this.$emit("handleSearchSubmit", this.searchContent);
        this.$bus.$emit("handleSearchSubmit");
        this.$store.dispatch("searchHistory", this.searchContent);
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import url("assets/css/mixin");
.search-frame {
  display: flex;
  padding: 10px;
  background-color: #fff;
  font-size: 14px;
  input {
    border-radius: 5px;
  }
  .left {
    flex: 1;
    position: relative;
    margin-right: 5px;
    font-weight: 700;
    input[type="text"] {
      width: 100%;
      padding: 10px 5px;
      background-color: #f2f2f2;
    }
    span {
      .cross-sign();
    }
  }

  input[type="submit"] {
    padding: 10px 30px;
    background-color: #3190e8;
    color: #fff;
  }
}
</style>